<template>
  <div class="register">
    <van-nav-bar title="登录" left-text="去注册" @click-left="onClickLeft" />

    <div class="main">
      <van-form @submit="onSubmit">
        <van-field class="input" v-model="formData.username" placeholder="用户名" />
        <van-field class="input" v-model="formData.password" type="password" placeholder="密码" />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { user_login } from "../axios/api";
import { Toast } from 'vant';
import { mapMutations, mapActions } from "vuex";


export default {
  data() {
    return {
      formData: { username: '', password: "" }
    }
  },
  methods: {
    ...mapMutations(['push_shopData']),
    onClickLeft() {
      Toast('注册页面');
      this.$router.push('/myregister')
    },
    onSubmit() {
      user_login({ phone: this.formData.username, pass: this.formData.password }).then(
        response => {
          if (response.data.code == 200) {
            Toast.success('登陆成功，欢迎回来');
            localStorage.setItem('token', response.data.token);
            localStorage.setItem('userinfo', JSON.stringify(response.data.userinfo))

            this.$store.dispatch('favlist');


            // this.$store.dispatch('chaxun_address');


            this.$store.dispatch('shopcart');


            this.$router.push('/myindex')
          } else {
            Toast.fail('账号或密码错误');
            // console.log(response.data);
          }
        }
      )
    },
  },
}

</script>

<style lang='scss' scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.input {
  margin: 60px auto;
  color: gray;
  border: 1px solid rgba(128, 128, 128, 0.088);
  border-radius: 30px;
}
</style>